<template>
  <div>
    <!-- 展示用户信息 -->
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark info">
          <el-card class="box-card  card_info">
            <div class="user_info">
              <!-- 头像 -->
              <div class="user_avatar">
                <el-image
                  style=" float:right; margin: 0 30px; width: 100px; height: 100px;border-radius: 50%;"
                  :src="info.name.value_1==''?'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png':info.name.value_1"
                  fit="fit"
                ></el-image>
              </div>

              <!-- 信息 -->
              <div class="user_info_content">
                <!--css 表格 -->
                <table class="user_info_table">
                  <tr>
                    <td>
                      <i class="el-icon-bank-card"></i>
                      学号:
                    </td>
                    <td><i></i> {{ info.stuNumber.value || "暂无" }}</td>

                    <td>
                      <i class="el-icon-school"></i>
                      学院:
                    </td>
                    <td>{{ info.stu_type.value || "暂无" }}</td>

                    <td>
                      <i class="el-icon-edit"></i>
                      学校:
                    </td>
                    <td>
                      <el-tag size="small">{{
                        info.project.value || "暂无"
                      }}</el-tag>
                    </td>
                    <td>
                      <i class="el-icon-message"></i>
                      邮箱:
                    </td>
                    <td> 暂无</td>

                    <td>
                      <i class="el-icon-edit"></i>
                      创建时间
                    </td>
                    <td>{{ info.join_shool_time.value | time }}</td>
                  </tr>

                  <tr>
                    <td>
                      <i class="el-icon-user"></i>
                      姓名:
                    </td>
                    <td>{{ info.name.value || "暂无" }}</td>

                    <td>
                      <i class="el-icon-guide"></i>
                      专业:
                    </td>
                    <td>{{ info.tea_unit.value || "暂无" }}</td>

                    <td>
                      <i class="el-icon-price-tag"></i>
                      班级:
                    </td>
                    <td>{{ info.class.value || "暂无" }}</td>

                    <td>
                      <i class="el-icon-phone-outline"></i>
                      电话:
                    </td>
                    <td>{{ info.phone || "暂无" }}</td>

                    <td>
                      <i class="el-icon-location-outline"></i>
                      学历
                    </td>
                    <td>{{ info.Education.value || "暂无" }}</td>
                  </tr>
                </table>

                <!-- 可选课程数 -->
              </div>
            </div>
          </el-card>
          <!-- <div class="user_info_table_title">
            <div class="ke1">
              <d2-icon
                style="font-size: 30px;"
                name="tasks"
                class="icon biao"
              />

              <span>已选课程数(34)门</span>
            </div>
            <div class="yi">
              <d2-icon style="font-size: 30px;" name="book" class="icon biao" />

              <span>可选课程数(34)门</span>
            </div>
          </div> -->
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark ke">
          <div class="yixuan">
            <el-card class="box-card">
              <div class="box-card-header">
                <div class="box-card-header-title">
                  <h3>已选课程</h3>
                </div>
              </div>
              <div class="box-card-body">
                <el-table
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column prop="courseId" label="课程序号" width="180">
                  </el-table-column>
                  <el-table-column
                    prop="courseName"
                    label="课程名称"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="classTime"
                    label="课程安排"
                    width="180"
                  >
                  </el-table-column>
                  <el-table-column prop="credit" label="学分" width="180">
                  </el-table-column>
                  <el-table-column label="任课教师" width="180">
                    <template slot-scope="scope">
                      <el-link
                        @click="teainfo(scope.row.teaInfoDTO)"
                        type="primary"
                        >{{ scope.row.teaInfoDTO.name }}</el-link
                      >
                    </template>
                  </el-table-column> 
                  <el-table-column label="上课地点"   prop="classPlace"  width="180">
                   
                  </el-table-column>
                  <!-- 已选人数 -->
                  <!-- <el-table-column label="已选人数" width="180">
        <template slot-scope="scope">
         {{scope.row.remain }}/ {{scope.row.max}}
        </template>
      </el-table-column> -->

                  <!-- <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="push(scope.row.randomCode)"
                        type="primary"
                        >退课<i class=" el-icon-s-claim"></i
                      ></el-button>
                    </template>
                  </el-table-column> -->
                </el-table>

                <el-dialog
                  title="教师详细信息"
                  :visible.sync="dialogVisible"
                  width="30%"
                >
                  <el-descriptions
                    v-if="dialogVisible"
                    class="margin-top"
                    :column="3"
                    :size="size"
                    border
                  >
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-user"></i>
                        照片
                      </template>
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="teaInfo.photo"
                        fit="fit"
                      ></el-image>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-user"></i>
                        教师姓名
                      </template>
                      {{ this.teaInfo.name }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-user"></i>
                        资质
                      </template>
                      {{ this.teaInfo.title }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                      </template>
                      {{ this.teaInfo.phone }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        居住地
                      </template>
                      {{ this.teaInfo.nativeplace }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-tickets"></i>
                        学校
                      </template>
                      <el-tag size="small"
                        >{{ this.teaInfo.schoolName }}}</el-tag
                      >
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-office-building"></i>
                        所属院系
                      </template>
                      {{ this.teaInfo.collegeName }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-dialog>
              </div>
            </el-card>
          </div>
          <div class="login">
            <!-- 登陆记录 -->
            <!-- <el-card class="box-card">
              <h3>近期登录</h3>
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
              </el-table>
            </el-card> -->
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { get_stu_course } from "@/api/releasecourse/course";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false
    };
  },
  computed: {
    ...mapState("d2admin/user", ["info"])
  },
  //过滤器
  filters: {
    // 时间戳转换
    time(val) {
      return new Date(val).toLocaleString();
    }
  },
  methods: {
    //获取已选课程
    get_course() {
      get_stu_course().then(res => {
        console.log(res);
        this.tableData = res.data;
      });
    },
    teainfo(val) {
      this.dialogVisible = true;
      this.teaInfo = val;
    }
  },
  created() {
    this.get_course();
  }
};
</script>

<style>
@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /* background: #99a9bf; */
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.user_info {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  padding: 20px;

  display: flex;
}
.user_avatar {
  flex: 1;
  width: 100px;
  height: 100px;

  margin: 0 auto;
  padding: auto;
}
.user_info_content {
  flex: 7;
  padding: 0 20px;
  font-family: "Microsoft YaHei";

  display: flex;

  justify-items: center;
}
.user_info_table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  flex: 5;
  border-color: #ccc;
}
.user_info_table tr :nth-child(even) {
  color: #4d4b4b;
  text-align: left;
  padding: 0 10px;
}
.user_info_table tr :nth-child(odd) {
  color: #a1a1a1;
  text-align: right;
}
.ke {
  display: flex;
}
.yixuan {
  margin-right: 20px;
}
.login {
  flex: 1;
}
.user_info_table_title {
  flex: 1;
  display: flex;
  /* 垂直居中 */
  justify-content: center;
  /* 垂直排列 */
  flex-direction: column;
  padding: 10px;
}
.biao {
  margin-right: 10px;
  color: #4d4b4b;
}
.ke1 {
  flex: 1;

  border-radius: 6px;
  background: #74ebd5; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #acb6e5,
    #74ebd5
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #acb6e5,
    #74ebd5
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  box-shadow: 9px 9px 21px #b0b0b0, -9px -9px 21px #ffffff;
  margin-bottom: 10px;
  padding-left: 20px;
  line-height: 75px;
}
.ke1 span {
  font-size: 25px;

  color: #e5e7ec; /* fallback for old browsers */
}
.yi {
  flex: 1;
  padding-left: 20px;
  border-radius: 6px;
  background: #8360c3; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #2ebf91,
    #8360c3
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #2ebf91,
    #8360c3
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  box-shadow: 9px 9px 21px #b0b0b0, -9px -9px 21px #ffffff;
  line-height: 75px;
}
.yi span {
  font-size: 25px;

  color: #f1f3f7; /* fallback for old browsers */
}

.card_info {
  flex: 4;
  margin-right: 10px;
}
.info {
  display: flex;
  justify-content: space-between;
}
</style>
